export default class Dialog extends EventTarget {
  constructor(opts) {
    super();
    // 默认配置
    let defaultOpts = {
      width: "30%",
      height: "250px",
      title: "测试标题",
      content: "测试内容",
      isShowMasker: true, // 是否遮罩
      isShowCancelBtn: false, // 是否显示取消按钮
      isDrag: false, // 是否可以拖拽
      confirm() {
        console.log("点击确定")
      },
      cancel() {
        console.log("点击取消")
      }
    }
    // 何必配置 (最好深拷贝,不用assign:assign多层的时候是浅拷贝,单层的时候深拷贝)
    this.opts = Object.assign(defaultOpts, opts)
    this.init();
  }
  init() {
    this.createDOM()
    if (!this.opts.isShowMasker) {
      document.querySelector(".dialogShade").style.display = "none"
    }
    // 自定义事件:绑定自定义事件
    this.addEventListener("confirm", this.opts.confirm)

    // 绑定点击事件
    this.divEl.addEventListener("click", e => {
      switch (e.target.className) {
        case "confirm_btn":
          this.confirm()
          this.close();
          break;
        case "cancelBtn":
          console.log("cancel_btn")
          this.close();
          break;
      }
    })

    // 是否允许拖拽
    if (this.opts.isDrag) {
      this.drag();
    }
  }
  drag() {
    let dialog = this.divEl.querySelector(".dialogContainer")
    dialog.onmousedown = e => {
      let x = e.clientX - dialog.offsetLeft;
      let y = e.clientY - dialog.offsetTop;
      dialog.onmousemove = e => {
        let xx = e.clientX;
        let yy = e.clientY;
        dialog.style.left = xx - x + "px"
        dialog.style.top = yy - y + "px"
      }
    }
    document.onmouseup = e => {
      dialog.onmousemove = '';
    }
  }

  createDOM() {
    let divEl = document.createElement("div")
    divEl.classList.add("dialog_box")
    divEl.innerHTML = `
      <div class="dialog_shade"></div>
      <div class="dialog_container">
        <div class='title'>${this.opts.title}</div>
        <div class="content">${this.opts.content}</div>
        <div class="footer">
          ${this.opts.isShowCancelBtn?'<div class="cancel_btn">取消</div>':''}
          <div class="confirm_btn">确定</div>
        </div>
      </div>
    `;
    divEl.style.display = "none"
    document.body.append(divEl)
    this.divEl = divEl;
  }

  // 暗号 哈士奇

  confirm() {
    let val = "值"
    let ev = new CustomEvent("confirm", {
      detail: val
    })
    this.dispatchEvent(ev)
  }
  open() {
    this.divEl.style.display = 'flex'
  }
  close() {
    this.divEl.style.display = 'none'
  }
}

export class ExtendsDialog extends Dialog {
  constructor(opts) {
    super(opts);
    this.createInput();
  }
  confirm() {
    let value = this.input.value ?? "默认值"
    super.confirm(value)
  }
  createInput() {
    let inputEl = document.createElement("input")
    inputEl.classList.add("input-container")
    this.divEl.querySelector(".content").appendChild(inputEl)
    this.inputEl = inputEl
  }
}

export class MyDialog extends HTMLElement{
  constructor() {
    super()
    this.innerHTML = "<button>点我</button>"
    let dialog = new Dialog({
      title: "title1",
      success:(e)=> {
        this.dispatchEvent(new CustomEvent("success", {
          detail:e.detail
        }))
      }
    })
    this.onclick = function () {
      dialog.open();
    }
  }
}

customElements.define("my-com",MyDialog)